<script setup lang="ts">
import { onMounted, reactive, ref, Ref } from 'vue';
import { getBannerList, getNavList, getProList } from '../../api/home';
import ProListCom from '../../components/ProListCom.vue';
import { iState } from '../../utils/homeType';

let state: iState = reactive({
  bannerList: [],
  navList: [],
  proList: []
})

onMounted(() => {
  // 获取轮播图数据
  getBannerList().then(res => {
    state.bannerList = res.data
  })

  // 获取宫格数据
  state.navList = getNavList()

  // 获取商品列表数据
  getProList({}).then(res => {
    // console.log(res.data);
    state.proList = res.data
  })

})

// ------------------------ 上拉加载更多 -------------------------
let loading: Ref<boolean> = ref(false) // 是否正在上拉加载
let finished: Ref<boolean> = ref(false) // 是否还有更多数据
let count: Ref<number> = ref(2) // 表示的是当前页，因为默认是在第一页

// 触发上拉加载更多的回调函数
function onLoad(): void {
  // 先标记当前是加载状态
  loading.value = true

  // 获取商品列表数据
  getProList({ count: count.value }).then(res => {
    // console.log(res.data);
    // state.proList = res.data

    if (res.data.length == 0) {
      // 没有更多数据了
      finished.value = true
    } else {
      // 还有数据
      state.proList = [...state.proList, ...res.data]
      loading.value = false
      count.value++
    }
  })
}
// ------------------------ 上拉加载更多 -------------------------

// -------------- 点击回到顶部 ----------------
// 记录当前滚动距离的属性
const top: Ref<number> = ref(0)
// 页面发生滚动的时候执行的函数
function scrollTop(e) {
  top.value = e.target.scrollTop
}

// 在 setup 中因为不能使用 this 所有我们可以直接定义一个 ref 属性
// 该属性和你设置在 DOM 上的名字要保持一致，设置的时候千万不要加 :
const content = ref()
// 点击回到顶部
function backTopClick() {
  // 修改滚动距离即可
  // console.log(content.value);
  // 找到滚动的 content 标签然后给其设置一个滚动距离为 0 即可
  content.value.scrollTop = 0
}
// -------------- 点击回到顶部 ----------------

// -------------- 下拉刷新 -------------
const loadingRefresh: Ref<boolean> = ref(false)

function onRefresh(): void {
  loadingRefresh.value = true
  // 获取商品列表数据
  getProList({}).then(res => {
    // console.log(res.data);
    state.proList = res.data
    loadingRefresh.value = false
    // 恢复上拉加载更多的属性
    count.value = 2
    finished.value = false
    loading.value = false
  })
}
// -------------- 下拉刷新 -------------
</script>
<template>
  <div class="box">
    <header class="header"> 首页 </header>

    <div class="content" ref="content" @scroll="scrollTop">

      <van-pull-refresh v-model="loadingRefresh" @refresh="onRefresh">

        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#f66">
          <van-swipe-item v-for="item in state.bannerList" :key="item.bannerid">
            <img :src="item.img" alt="">
          </van-swipe-item>
        </van-swipe>

        <!-- 宫格布局 -->
        <van-grid column-num="5" :border="false">
          <van-grid-item v-for="item in state.navList" :key="item.navid" :icon="item.imgurl" :text="item.title" />
        </van-grid>

        <!-- 商品列表 -->
        <!--
        v-model:loading="loading"   标记是否正在加载中
        :finished="finished"        标记是否还有更多数据
        @load="onLoad"              触底之后的回调函数
        finished-text="没有更多了"   没有更多数据时给用户的提示
       -->
       <!-- 
          系统组件无法满足我们的项目需求的时候可以去封装我们自己的组件
          什么是好的组件：该组件复用性强，可扩展性强，方便使用，入参和出参比较丰富
        -->
        <van-list v-model:loading="loading" :finished="finished" @load="onLoad" finished-text="没有更多了">
          <ProListCom :proList="state.proList" />
        </van-list>

        <!-- 回到顶部 -->
        <div class="backTop" @click="backTopClick" v-show="top > 280">
          <van-icon size="30" name="back-top" />
        </div>
      </van-pull-refresh>


    </div>
  </div>
</template>
<style scoped lang="scss">
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 170px;
  height: 170px;
  text-align: center;
  background-color: #39a9ed;
}

.my-swipe img {
  width: 100%;
  height: 100%;
}

.backTop {
  position: fixed;
  right: 15px;
  bottom: 110px;
  width: 36px;
  height: 36px;
  background-color: white;
  border: 1px solid #f66;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
